<template>
  <div class="operVideo">

    <div class="func-block" @click="searchCommentDialog = true">
      <el-button type="warning" plain icon="el-icon-search">精准筛选</el-button>
    </div>

    <div class="func-block" @click="getCommentList()">
      <el-button type="primary">清除筛选</el-button>
    </div>

    <el-table :data="commentList">
      <el-table-column prop="commentId" label="评论ID" width="150" align="center">
      </el-table-column>

      <el-table-column prop="parentId" label="父评论ID" width="150" align="center">
      </el-table-column>

      <el-table-column prop="publisher" label="评论用户" width="150" align="center">
      </el-table-column>

      <el-table-column prop="videoTitle" label="视频标题" width="150" align="center">
      </el-table-column>

      <el-table-column prop="content" label="评论内容" width="150" align="center">
      </el-table-column>

      <el-table-column label="评论时间" width="200" align="center">
        <template slot-scope="scope">
          {{
            scope.row.subTime | dateFormat("yyyy-mm-dd hh:mm:ss")
          }}
        </template>
      </el-table-column>

      <el-table-column align="center" width="150">
        <template slot-scope="scope">
          <el-button style="margin-left: 35px;" class="tableButton"
            @click="handleDelete(scope.row.commentId, scope.row.parentId)" type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 每页5条 -->
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getCommentList" />

    <el-dialog title="筛选查询" :visible.sync="searchCommentDialog" width="40%" center>
      <el-form ref="searchCommentForm" :model="searchCommentForm" label-width="80px">
        <el-form-item label="评论用户">
          <el-input v-model="searchCommentForm.publisher"></el-input>
        </el-form-item>
        <el-form-item label="视频标题">
          <el-input v-model="searchCommentForm.videoTitle"></el-input>
        </el-form-item>
        <el-form-item label="评论时间">
          <el-col :span="8">
            <el-date-picker type="date" placeholder="选择起始日期" v-model="searchCommentForm.startDate" style="width: 100%;"
              format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
          </el-col>
          <el-col style="text-align: center;" :span="1">-</el-col>
          <el-col :span="8">
            <el-date-picker placeholder="选择截至日期" v-model="searchCommentForm.endDate" style="width: 100%;"
              format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
          </el-col>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="searchCommentDialog = false">取 消</el-button>
        <el-button type="warning" @click="searchComment()">查 询</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { getCommentList, deleteComment } from "@/api/comment";

export default {
  name: "operComment",
  data() {
    return {
      commentList: null,
      dialogDetailVisible: false,
      queryParams: {
        pageNum: 1,
        pageSize: 5
      },
      total: 0,
      detail: {
        commentInfo: {},
      },
      tableLoader: false,
      searchCommentDialog: false,
      searchCommentForm: {
        publisher: '',
        videoTitle: '',
        startDate: '',
        endDate: ''
      },
    };
  },

  created() {
    this.tableLoader = true
    this.getCommentList();
  },

  methods: {
    getCommentList() {
      getCommentList(this.queryParams, this.searchCommentForm).then((res) => {
        this.commentList = res.rows;
        this.total = res.total;
        this.tableLoader = false
      });
    },

    handleDelete(cid, pid) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteComment(cid, pid ? true : false).then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.tableLoader = true
          this.getCommentList();
        });
      });
    },

    searchComment() {
      this.searchCommentDialog = false
      this.tableLoader = true
      this.getCommentList()
      this.searchCommentForm = Object.assign({}, {
        publisher: '',
        videoTitle: '',
        startDate: '',
        endDate: ''
      })
    }
  },

  filters: {
    dateFormat: function (val, args) {
      if (val) {
        var dt = new Date(val);
        var year = dt.getFullYear();
        var month = ("0" + (dt.getMonth() + 1)).slice(-2);
        var day = ("0" + dt.getDate()).slice(-2);
        if (args.toLowerCase() === "yyyy-mm-dd") {
          return year + "-" + month + "-" + day;
        } else {
          var hour = ("0" + dt.getHours()).slice(-2);
          var min = ("0" + dt.getMinutes()).slice(-2);
          var sec = ("0" + dt.getSeconds()).slice(-2);
          return (
            year + "-" + month + "-" + day + " " + hour + ":" + min + ":" + sec
          );
        }
      } else {
        return '';
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.func-block {
  margin-bottom: 20px;
  display: inline-block;
  margin-right: 20px;
}

.tableButton {
  margin-right: 40px;
}

.pagination {
  margin-top: 30px;
  width: 1300px;
  float: right;
}
</style>
